<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10">
        <div class="mainor_form small-top">
          <el-form
            :inline="true"
            :model="goodsForm"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="90px"
            id="form"
          >
            <el-form-item label="是否上架：" prop="isListing">
              <el-select
                v-model.trim="goodsForm.isListing"
                placeholder="是否上架"
                class="wid220"
              >
                <el-option
                  v-for="item in listingList"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <MainFormBtn @reset="reset" @getSearchFor="getSearchFor" :loading="listLoading">
            </MainFormBtn>
          </el-form>
        </div>
        <div class="main-controls-wrap">
          <div>
            <el-button class="mainor_tea fill-height" @click="addMeal">新增套餐</el-button>
          </div>
        </div>

        <div class="main_table">
          <el-table
            ref="multipleTable"
            :data="tableList"
            element-loading-text="加载中"
            fit
            border
            highlight-current-row
            v-loading="listLoading"
            :header-cell-class-name="this.$verticaline"
            :height="borderHeight + 20"
            :header-cell-style="tableHeightStyle"
            @header-dragend="changeTableWidth"
            @expand-change="expandChange"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column type="expand" class-name="main_hei">
              <template slot-scope="props">
                <el-table
                  :data="props.row.children"
                  class="child-table"
                  fit
                  :highlight-current-row="false"
                >
                  <el-table-column label width="40" align="right" />
                  <el-table-column
                    label="图片"
                    prop="spu_name.title"
                    width="200"
                  >
                    <template slot-scope="scope">
                      <div class="demo-image__error mainor_im">
                        <el-image
                          fit="fill"
                          :src="scope.row.pic"
                          :preview-src-list="[scope.row.pic]"
                        >
                          <div slot="error" class="image-slot">
                            <img :src="puzzleImg" />
                          </div>
                        </el-image>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品名称" prop="goods_name" width="200" />
                  <el-table-column label="单位" prop="unit_name" />
                  <el-table-column label="组成数量" prop="num" />
                  <el-table-column label="市场价" prop="market_price" />
                  <el-table-column label="最近一次采购价" prop="latest_purchase_price" />
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              label="套餐名称"
              prop="name"
              show-overflow-tooltip
              :width="tableWidth[hash + 'name']"
            />
            <el-table-column
              label="是否上架"
              prop="is_online"
              show-overflow-tooltip
              :width="tableWidth[hash + 'is_online']"
            />
            <el-table-column
              label="图片"
              prop="name"
              show-overflow-tooltip
              :width="tableWidth[hash + 'name'] || 300"
            >
              <template slot-scope="scope">
                <div class="demo-image__error mainor_im">
                  <el-image
                    fit="fill"
                    :src="scope.row.pic"
                    :preview-src-list="[scope.row.pic]"
                  >
                    <div slot="error" class="image-slot">
                      <img :src="puzzleImg" />
                    </div>
                  </el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="管理操作"
              prop="title"
              align="center"
              width="200"
            >
              <template slot-scope="scope">
                <el-link type="primary" @click="editMeal(scope.row.id)" >编辑</el-link >
                <el-link type="danger" @click="deleteTableById(scope.row)" >删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <div class="main_page_r">
            <MainPagination
              :current-page="currentPage"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changePage"
              @current-change="changePage"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mixins } from "@/mixins/index.js";
import { puzzleImg } from "@/api/currency";
import { goodsData } from '../mockData'
import { getInfo } from '@/api/menu.js'
const { goodsForm, listingList, tableList, currentPage, totalCount, pageSize } = goodsData

export default {
  mixins: [mixins],
  components: { },
  data() {
    return {
      goodsForm,
      listingList,
      listLoading: false,
      tableList,
      currentPage,
      totalCount,
      pageSize,
      puzzleImg
    };
  },
  created() {
    // 列表
    this.getNumerical(220);
    this.getTableData()
  },
  methods: {
    reset() {
      this.goodsForm.isListing = '-1'
      this.getSearchFor()
    },
    addMeal() { //  新增套餐
      this.$router.push({
        path: '/menu/goods/add',
      })
    },
    editMeal(id) {  //编辑套餐
      this.$router.push({
        path: '/menu/goods/add',
        query: {
          id
        }
      })
    },
    getSearchFor() {  //  搜索
      this.currentPage = 1
      this.getTableData()
    },
    changePage() {

    },
    handeleEdit() {
    },
    getTableData() {
      this.listLoading = true
      getInfo('/packageGoods/list', {
        status: this.goodsForm.isListing,
        page: this.currentPage,
        pagesize: this.pageSize
      }).then(res => {
        this.tableList = res.data.list.map(el => {
          el.isUnfold = false
          el.children = []
          return el
        })
        this.totalCount = res.data.total
        this.listLoading = false
      })
    },
    expandChange(row, expanded) {
      row.isUnfold = !row.isUnfold
      if(row.isUnfold) {
        if(!row.children.length) {
          getInfo('/packageGoods/packageGoodslist', {
            package_goods_id: row.id,
          }).then(res => {
            row.children = res.data
          })
        }
      }
    },
    deleteTableById(row) {
      this.$confirm(`是否删除${row.name}套餐?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          getInfo('/packageGoods/del', {
            id: row.id,
          }).then(res => {
            this.$message.success('删除成功')
            this.getTableData()
          })
        })
        .catch(() => {});
    }
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
  .mainor_form form {
    width: calc(100% - 100px);
    .el-form-item {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 4px;
      }
    }
  }
}
/deep/.main_table .el-table .el-table__cell.el-table__expanded-cell {
  padding: 0 0 0;
  background: #fafafa !important;
}
.main_table {
  /deep/.el-table tr.expanded + tr .child-table {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .child-table th,
  /deep/.el-table tr.expanded + tr .child-table tr {
    background: #fafafa !important;
  }
}

// 导出订单表头
.exptitle {
  display: block;
  font-size: 16px;
  color: #000000;
  margin: 0 0 10px;
}
.maintip {
  text-align: center;
  padding-top: 15px;
  font-size: 18px;
  span {
    display: inline;
    padding: 18px 0;
    color: red;
  }
}
.type1 {
  color: #03a98e;
}
.type2 {
  color: red;
}
.type3 {
  color: #e47c02;
}
// 导入
.importForm {
  display: flex;
  align-items: center;
  justify-content: center;
}
.allot_type_container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  & > div {
    width: 90px;
    height: 90px;
    margin: 10px 0;
    text-align: center;
    line-height: 90px;
    font-size: 14px;
    color: #585858;
    border: 1px solid #DCDFE6;
    cursor: pointer;
    border-radius: 8px;
    &:hover {
      color: #03a98e;
      border-color: #03a98e;
    }
  }
}
.main_dialog_copy {
  /deep/ .el-dialog {
    margin-top: 30vh !important;
  }
}
/deep/.main_table .el-table--small td .cell {
  height: auto;
}
/deep/.el-input--suffix .el-input__inner {
  padding-right: 0px;
}
/deep/.el-message-box__wrapper .el-button:focus,
.el-message-box__wrapper .el-button:hover,
.el-dialog__wrapper .el-button:focus,
.el-dialog__wrapper .el-button:hover {
  background: #03a98e;
  border-color: #03a98e;
  color: white;
}
.flexs {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 5px;
}
.dialog_footer {
  justify-content: flex-end;
  display: flex;
  margin-top: 20px;
}
/deep/.el-input-number.is-without-controls .el-input__inner {
  text-align: left;
}
</style>
